<template>
  <div class="pageHead">
    <div class="headLeft">
      <i class="iconfont" @click="backHandler">&#xe681;</i>
    </div>
    <div class="headTitle">
      {{headTitle}}
    </div>
    <div class="headRight">
      <i class="iconfont" @click="clickPathHandler(clickPath)">&#xe64e;</i>
    </div>
  </div>
</template>
<script>
export default {
  name: "PageHead",
  data() {
    return {
      
    }
  },
  props: {
    headTitle: {
      type: String,
      require: false
    },
    clickPath: {
      type: String,
      require: true
    }
  },
  methods: {
    clickPathHandler(clickPath){
     this.$router.push({path:clickPath})
    },
    backHandler(){
      this.$router.go(-1);
    }
  }
}
</script>

<style lang="less" scoped>
  .pageHead{
    width: 10rem;
    padding: 30px 10px 10px;
    box-sizing: border-box;
    background-color: #ff406f;
    height: 150px;
    .headLeft,.headTitle,.headRight{
      float: left;
      color: #fff;
      font-size: 20px;
    }
    .headTitle{
      width: 60%;
      text-align: center;
    }
    .headRight{
      text-align: right;
    }
    .headLeft,.headRight{
      width: 20%;
      i{
        font-size: 28px;
      }
    }
  }
</style>


